<template>
  <div class="IntelligentDetail">
    <div class="fromed">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" size="medium" label-width="90px">
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="事件描述：">
                  <el-input v-model="formData.sjms"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="确认人：">
                  <el-input v-model="formData.remarkPerson"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="是否确认：">
                  <el-select v-model="formData.isConfirm" clearable :style="{width: '100%'}">
                    <el-option
                      v-for="(item,index) in confirm_options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="发生时间:">
                  <el-date-picker
                    v-model="formData.fssj"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    style="width:100%"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="3">
            <div class="IntelligentDetail-btn">
              <el-button type="primary" @click="submitForm">查询</el-button>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div
      class="tableed bigTableStyle"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table
        border
        :data="tableData"
        height="100%"
        :row-class-name="tableRowClassName"
        style="width: 100%;"
      >
        <el-table-column prop="myIndex" label="序号" width="80"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="BDZMC" label="变电站名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="DYDJMC" label="电压等级"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="SJMS" label="事件描述"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="KSSJ" label="发生时间"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="图像/录像">
          <template slot-scope="scope">
            <viewer :images="[scope.row.PICURL]" @inited="inited(scope.row,$event)">
              <img :src="scope.row.PICURL" alt srcset v-show="false" />
              <span class="iconfont iconpicture pitcure" @click="clickEvent(scope.row)"></span>
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="ISCONFIRMMC" label="是否确认" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button
              style="margin:0 auto;"
              type="text"
              v-if="scope.row.ISCONFIRM==='0'"
              @click="clickConfirmEvent(scope.row)"
            >确认</el-button>
            <span style="margin:0 auto;" v-else>已确认</span>
          </template>
        </el-table-column>
        <el-table-column prop="REMARKPERSON" label="确认人"></el-table-column>
      </el-table>
    </div>
    <div class="paged elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import lodash from "lodash";
import { publicAPIModule } from "@/store/modules/public";

@Component
export default class IntelligentDetail extends Vue {
  public pickerOptions: any = {
    shortcuts: [
      {
        text: "本日",
        onClick(picker) {
          var now = new Date().getTime();
          var startTime = now - 3600 * 1000 * 24 * 1;
          console.log(new Date(startTime), new Date(now));
          picker.$emit("pick", [new Date(startTime), new Date(now)]);
        },
      },
      {
        text: "本周",
        onClick(picker) {
          const weekEnd = new Date().getTime();
          // const weekStart = (new Date().getDate(), 0);
          const weekStart = weekEnd - 3600 * 1000 * 24 * 7;
          picker.$emit("pick", [new Date(weekStart), new Date(weekEnd)]);
        },
      },
      {
        text: "本月",
        onClick(picker) {
          const monthEnd = new Date().getTime();
          // const monthStart = new Date().getMonth() - 1;
          const monthStart = monthEnd - 3600 * 1000 * 24 * 30;
          picker.$emit("pick", [new Date(monthStart), new Date(monthEnd)]);
        },
      },
    ],
  };
  loading: boolean = false;
  //搜索框from表单数据
  formData = {
    sjms: "",
    remarkPerson: "",
    isConfirm: "",
    fssj: [],
  };

  // 查询
  submitForm() {
    // TODO 提交表单
    this.pages.page = 1;
    this.getMoreRecords();
  }

  //table表格相关事件数据
  tableData: any[] = [];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 10,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.getMoreRecords();
  }
  // 告警确认
  clickConfirmEvent(row) {
    // console.log(row);
    let id = row.ID || "";
    let params = {
      id,
    };
    this.$confirm("您确定要确认告警吗！", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        (this as any).$services
          .videoRemarkInfo({ data: params })
          .then((result: any) => {
            if (result.success === true) {
              this.getMoreRecords();
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.getMoreRecords();
  }
  //   是否确认选项
  confirm_options = [
    {
      label: "是",
      value: "1",
    },
    {
      label: "否",
      value: "0",
    },
  ];

  // 查询当前表格数据
  getMoreRecords() {
    let confirm_options = this.confirm_options;
    let obj = {};
    confirm_options.forEach((item) => {
      obj[item.value] = item.label;
    });
    this.loading = true;
    let form = {
      sjms: this.formData.sjms,
      remarkPerson: this.formData.remarkPerson,
      isConfirm: this.formData.isConfirm,
      kssj: this.formData.fssj[0] || "",
      jssj: this.formData.fssj[1] || "",
      page: this.pages.page,
      rows: this.pages.pageSize,
      interval:''
    };
   form.interval= this.addType(form);
    (this as any).$services
      .getMoreRecords({ data: form, method: "get" })
      .then((result: any) => {
        this.loading = false;
        let data = result.data;
        let page = this.pages.page;
        let size = this.pages.pageSize;
        let tableData = data.records || [];
        tableData.forEach((v, i) => {
          v.ISCONFIRMMC = obj[v.ISCONFIRM];
          v.myIndex = (page - 1) * size + i + 1;
        });
        this.tableData = tableData;
        console.log(tableData);
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        this.loading = false;
        console.log(err);
      });
  }
  addType(arrData) {
    let type = "self";
    let time =
      new Date(arrData.jssj).getTime() -
      new Date(arrData.kssj).getTime();
    if (time >= 1 * 1000 * 60 * 60 * 24 && time < 2 * 1000 * 60 * 60 * 24) {
      type = "day";
    } else if (
      time >= 7 * 1000 * 60 * 60 * 24 &&
      time < 8 * 1000 * 60 * 60 * 24
    ) {
      type = "week";
    } else if (
      time >= 30 * 1000 * 60 * 60 * 24 &&
      time < 31 * 1000 * 60 * 60 * 24
    ) {
      type = "month";
    }
    return type;
  }
  mounted() {
    // 查询表格数据
    this.getMoreRecords();
  }
  // 初始化图片放大
  inited(row, viewer) {
    row.viewer = viewer;
  }
  // 录制/图像点击事件
  clickEvent(row: any) {
    row.viewer.show();
  }
}
</script>

<style lang="scss" scoped>
.IntelligentDetail {
  width: 100%;
  height: 6.2rem;
  &-btn {
    display: flex;
    justify-content: space-around;
  }
  .fromed {
    height: 60px;
  }
  .tableed {
    height: calc(100% - 100px);
    .pitcure {
      font-size: 0.24rem;
      cursor: pointer;
    }
  }
  .paged {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

